<template>
  <el-header class="header">
    <div class="header-content">
      <div class="logo">
        <el-icon><Document /></el-icon>
        <span>AI文本智能改进系统</span>
      </div>
      <div class="user-info">
        <el-dropdown v-if="isLoggedIn" @command="handleCommand">
          <span class="user-name">
            <el-icon><User /></el-icon>
            {{ userName }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- 第一点：在图标和退出登录之间加用户名 -->
              <el-dropdown-item disabled class="username-item">
                <el-icon><User /></el-icon>
                {{ userName }}
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button v-else type="primary" @click="showLogin">
          <el-icon><User /></el-icon>
          登录
        </el-button>
      </div>
    </div>
  </el-header>

  <!-- 登录弹窗 -->
  <LoginDialog v-model="loginDialogVisible" @register="showRegister" @forgot="showForgot" />
  
  <!-- 注册弹窗 -->
  <RegisterDialog v-model="registerDialogVisible" />
  
  <!-- 忘记密码弹窗 -->
  <ForgotPasswordDialog v-model="forgotDialogVisible" />
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { Document, User, ArrowDown, SwitchButton } from '@element-plus/icons-vue'
import LoginDialog from '@/views/Login.vue'
import RegisterDialog from '@/views/Register.vue'
import ForgotPasswordDialog from '@/views/ForgotPassword.vue'

const userStore = useUserStore()
const loginDialogVisible = ref(false)
const registerDialogVisible = ref(false)
const forgotDialogVisible = ref(false)

const isLoggedIn = computed(() => userStore.isLoggedIn)
const userName = computed(() => userStore.userName)

const showLogin = () => {
  loginDialogVisible.value = true
}

const showRegister = () => {
  loginDialogVisible.value = false
  registerDialogVisible.value = true
}

const showForgot = () => {
  loginDialogVisible.value = false
  forgotDialogVisible.value = true
}

const handleCommand = (command) => {
  if (command === 'logout') {
    userStore.logout()
    ElMessage.success('已退出登录')
  }
}
</script>

<style scoped>
.header {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: bold;
  color: #667eea;
}

.user-name {
  cursor: pointer;
  font-size: 16px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 用户名显示项样式 */
:deep(.username-item) {
  cursor: default;
  font-weight: bold;
}
</style>